<template>
  <div class="container store-detail-container">
    <div class="store-info-home" v-if="storeInfoActive==0">
      <store-info-home v-if="storeInfo" :changeGoods="changeGoods" :cate_id="cate_id" :data="storeInfo"
        :cancelStoreCollect="cancelStoreCollect" :storeCollect="storeCollect" :content="content" :tagList="tagList"></store-info-home>
      <div v-else class="view-loading">
        <i-spin />
      </div>
    </div>

    <div v-if="storeInfoActive==1">
      <store-info-product-list></store-info-product-list>
    </div>
    <div v-if="storeInfoActive==2">
      <store-info-classification></store-info-classification>
    </div>
    <div class="tab-bar-bg"></div>
    <div class="store-info-nav">
      <van-tabbar :active="storeInfoActive" @change="changeTab">
        <van-tabbar-item>
          <span>首页</span>
          <img slot="icon" slot-scope="props" :src="icon1.normal">
          <img slot="icon-active" slot-scope="props" :src="icon1.active">
        </van-tabbar-item>
        <van-tabbar-item>
          <span>全部商品</span>
          <img slot="icon" slot-scope="props" :src="icon2.normal">
          <img slot="icon-active" slot-scope="props" :src="icon2.active">
        </van-tabbar-item>
        <van-tabbar-item>
          <span>分类</span>
          <img slot="icon" slot-scope="props" :src="icon3.normal">
          <img slot="icon-active" slot-scope="props" :src="icon3.active">
        </van-tabbar-item>
        <van-tabbar-item>
          <span>客服</span>
          <img slot="icon" slot-scope="props" :src="icon4.normal">
          <img slot="icon-active" slot-scope="props" :src="icon4.active">
        </van-tabbar-item>
      </van-tabbar>
    </div>

    <ant-customer-service :visible="shopSheetCisible" :cancel="cancel"></ant-customer-service>
    <i-toast id="toast" />
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  const {
    $Toast
  } = require('@/../static/iview/base/index');
  import Banner from "@/components/banner";
  import AntCustomerService from '@/components/customerService'
  import storeInfoHome from './storeInfoHome'
  import storeInfoProductList from './storeInfoProductList'
  import storeInfoClassification from './storeInfoClassification'
  import request from "@/api/request";
  import {
    getMallCollect,
    cancelCollect,
    copyClipboard,
    cancelStoreCollect,
    storeCollect
  } from "@/utils/index";
  export default {
    components: {
      storeInfoHome,
      storeInfoProductList,
      storeInfoClassification,
      AntCustomerService
    },
    data() {
      return {
        shopSheetCisible: false,
        cate_id: null,
        storeInfo: null,
        content: null,
        tagList: null,
        page: 1,
        icon1: {
          normal: '../../static/images/store-tab-1.png',
          active: '../../static/images/store-tab-1-active.png'
        },
        icon2: {
          normal: '../../static/images/store-tab-2.png',
          active: '../../static/images/store-tab-2-active.png'
        },
        icon3: {
          normal: '../../static/images/store-tab-3.png',
          active: '../../static/images/store-tab-3-active.png'
        },
        icon4: {
          normal: '../../static/images/store-tab-4.png',
          active: '../../static/images/store-tab-4-active.png'
        },
        storeInfoActive: 0
      };
    },
    computed: {
      ...mapState(['locationInfo'])
    },
    methods: {
      cancel() {
        console.log(222)
        this.shopSheetCisible = false
      },
      changeGoods() {
        this.storeInfoActive = 1
      },
      changeTab(e) {
        console.log(e.mp.detail)
        this.storeInfoActive = e.mp.detail
        if (e.mp.detail == 3) {
          this.shopSheetCisible = true
          console.log(this.shopSheetCisible)
        }
      },
      getMallGoodsDetail() {
        // 请求店铺详情
        request
          .getMallStoreDetail({
            store_id: this.cate_id,
            longitude: this.locationInfo.location.lng,
            latitude: this.locationInfo.location.lat,
            page: this.page,
          })
          .then(res => {
            console.log(res.data)
            console.log(res.data)
            this.storeInfo = res.data
            this.getContent()
          });
      },
      storeCollect() {
        storeCollect({
          store_id: this.cate_id
        }).then((res) => {
          console.log("收藏成功1111")
          console.log(res)
          $Toast({
            content: res.message,
            type: res.code == 0 ? 'success' : 'warning'
          });
          this.getMallGoodsDetail();
        }).catch(error => {
          console.log(error)
        })
      },
      cancelStoreCollect() {
        console.log("取消")
        cancelStoreCollect({
          store_id: this.cate_id
        }).then((res) => {
          console.log(res)
          console.log("取消成功")
          $Toast({
            content: res.message,
            type: res.code == 0 ? 'success' : 'warning'
          });
          this.getMallGoodsDetail();
        }).catch(error => {
          console.log(error)
        })
      },
      getContent() {
        this.content = this.storeInfo.detail.store_detail.match(/http\S+([\.jpg][\.png])+/g)
        this.tagList = this.storeInfo.detail.store_label.split(',')
      },
    },
    onUnload() {
      this.storeInfo = null
      this.storeInfoActive = 0
      console.log(222)
      console.log(1111)
    },
    mounted() {
      console.log(2222)
      this.cate_id = this.$route.query.cate_id
      this.getMallGoodsDetail()
    },

  };

</script>

<style lang="less">
  .store-detail-container {
    display: flex;
  }

  .store-detail-pic {
    width: 100%;

    background: #F9F9F9;

    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }


  .store-prots {
    border-top: 1px solid #F9F9F9;
    padding: 0 0 12px;
    background: #fff;

    .store-prots-cell {
      display: flex;
      align-items: flex-start;
      padding: 12px 15px 0;

      .store-prots-hd {
        font-size: 0;
        padding-top: 2px;
        margin-right: 12px;
      }

      .store-prots-bd {
        flex: 1;
        font-size: 12px;
        color: rgba(64, 64, 64, 1);
        line-height: 18px;
      }

      .additional {
        color: #A0A0A0;
      }

      .store-prots-ft {
        height: 20px;
        font-size: 0;
        border-left: 1px solid #EAEAEA;
        padding: 0 5px 0 20px;
      }
    }

  }

  .store-coupons-list {
    background: #fff;
    overflow-x: auto;
    white-space: nowrap;
    padding-left: 15px;
    margin-bottom: 10px;
    height: 80px;
  }

  .coupons {
    background: #FFF1EE;
    border: 1rpx solid #FFC9BC;
    border-radius: 5px;
    position: relative;
    padding: 23px 27px 13px 18px;
    display: inline-block;
    margin-right: 15px;

    .tag {
      position: absolute;
      left: 0;
      top: 0;
      font-size: 8px;
      line-height: 16px;
      background: #F8B351;
      color: #fff;
      padding: 0 5px;
    }

    .coupons-hd {
      margin-bottom: 6px;
    }

    .coupons-name {
      font-size: 14px;
      color: #EE7559;
      line-height: 1em;
    }

    .coupons-bd {
      display: flex;
    }

    .coupons-amount {
      font-size: 10px;
      color: #A0A0A0;
      line-height: 1em;
    }

    .coupons-btn {
      margin-left: 20px;
      font-size: 10px;
      color: #EF7D63;
      line-height: 1em;
    }
  }

  .product-hot-list {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .product-hot {
    flex: 1;

    .product-hot-pic {
      background: #F9F9F9;

      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }

    .product-hot-info {
      padding: 10px 15px 10px;

      .product-hot-name {
        font-size: 12px;
        color: #333333;
        line-height: 1.5em;
        margin-bottom: 10px;
      }

      .product-hot-body {
        display: flex;
        align-items: flex-end;

        .product-hot-price {
          font-size: 14px;
          color: #EE7559;
          line-height: 1em;
        }

        .product-hot-sales {
          margin-left: 10px;
          font-size: 10px;
          color: #A0A0A0;
          line-height: 1em;
        }
      }
    }
  }

  .store-tab-bar-item {
    &.i-tab-bar-item {}
  }

  .product-hot-list {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;

    .ant-product-hot {
      flex: 0 50%;
    }
  }

  .tab-bar-bg {
    height: 50px;
  }

  .store-info-nav {
    display: flex;
    z-index: 9999;
    position: relative;
  }

  .store-info-home {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

</style>
